<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>后台-添加日志</title>
		<link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
		<link th:href="@{/css/style.min.css}" rel="stylesheet">

	</head>

	<body>
		<div class="lyear-layout-web">
			<div class="lyear-layout-container">

				<div th:replace="comm/WL2022-CommAdmin :: #commLeftNavigation"></div>
				<div th:replace="comm/WL2022-CommAdmin :: #commHeader"></div>

				<!--页面主要内容-->
				<main class="lyear-layout-content">
					<div class="container-fluid">

						<div class="row">
							<div class="col-lg-12">
								<div class="card">
									<div class="card-body">

										<form class="row">
											
											<div class="form-group col-md-12">
												<label for="example-datetimepicker">时间选择</label>
												<input class="form-control js-datetimepicker" type="text" id="example-datetimepicker" name="add_time" placeholder="请选择具体时间" value="" data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm:ss" />
											</div>

											<div class="form-group col-md-12">
												<label for="log">日志信息</label>
												<textarea id="log" class="form-control" name="summary"
													maxlength="300" placeholder="日志信息（必填！300字内）..." rows="6"
													style="resize: none"></textarea>
											</div>

											<div class="form-group col-md-12">
												<button  class="btn btn-primary" lay-submit lay-filter="submitMy" >确 定</button>
											</div>
											
										</form>
									</div>
								</div>
							</div>

						</div>

					</div>
				</main>
				<!--End 页面主要内容-->
			</div>
		</div>

		<script th:src="@{/layui/layui.js}"></script>
		<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/perfect-scrollbar.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
		<!--时间选择插件-->
		<link rel="stylesheet" th:href="@{/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}">
		<script th:src="@{/js/bootstrap-datetimepicker/moment.min.js}"></script>
		<script th:src="@{/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}"></script>
		<script th:src="@{/js/bootstrap-datetimepicker/locale/zh-cn.js}"></script>

		<script type="text/javascript">
			layui.use(['jquery', 'form',], function () {
				const layer = layui.layer;
				const form = layui.form;
				const $ = layui.jquery;
				form.on('submit(submitMy)', function () {
					//判空
					let time = $("#example-datetimepicker").val();
					let log = $("#log").val();
					console.log(time);
					console.log(log);
					if (time === '' || time === null) {
						layer.msg('请先选择日期！', {icon: 5});
						return false;
					}
					if (log.replace(/\s*/g, "") === '' || log.replace(/\s*/g, "") === null) {
						layer.msg('内容不能为空！', {icon: 5});
						return false;
					}

					$.ajax({
						url: "[[@{/root/addLog}]]",
						type: "post",
						data: {
							time:new Date(time),
							diary:log
						},
						success: function (r) {
							if(r){
								layer.open({
									title: '保存成功',
									content: '保存成功',
									icon: 6,
								});
								$("#example-datetimepicker").val('');
								$("#log").val('');
							}else{
								layer.open({
									title: '保存失败',
									content: '麻烦联系一下管理员，连夜改bug',
									icon: 5
								});
							}
						},
						error: function () {
							layer.open({
								title: '程序出错',
								content: '程序故障！麻烦联系一下管理员',
								icon: 5
							});
						}
					})
					return false;
				})
			})
		</script>


	</body>
</html>
